import { get } from './base'
import type { ApiResponse } from './base'

// 图表数据请求接口
export interface ChartDataRequest {
  type: 'aqi' | 'ozone' | 'temperature'
  city?: string
  days?: number
  start_date?: string
  end_date?: string
}

// 图表数据响应接口
export interface ChartData {
  labels: string[]
  datasets: {
    label: string
    data: number[]
    borderColor?: string
    backgroundColor?: string
    borderWidth?: number
    tension?: number
    fill?: boolean
    pointBackgroundColor?: string
    pointBorderColor?: string
    pointBorderWidth?: number
    pointRadius?: number
    pointHoverRadius?: number
  }[]
  config: {
    title: string
    xAxis: { title: string; unit?: string }
    yAxis: { title: string; unit?: string; min?: number; max?: number }
  }
}

// 获取图表数据
export async function getChartData(params: ChartDataRequest): Promise<ChartData> {
  try {
    // 如果有真实API，使用真实API
    // const response = await get<ChartData>('/charts/data', params)
    // return response.data
    
    // 模拟数据，从Home.vue中提取的图表数据
    const mockData: Record<string, ChartData> = {
      aqi: {
        labels: ['1月11日', '1月12日', '1月13日', '1月14日', '1月15日'],
        datasets: [{
          label: 'AQI指数',
          data: [58, 73, 68, 52, 45],
          borderColor: 'rgb(99, 102, 241)',
          backgroundColor: 'rgba(99, 102, 241, 0.1)',
          borderWidth: 3,
          tension: 0.4,
          fill: true,
          pointBackgroundColor: 'rgb(99, 102, 241)',
          pointBorderColor: '#fff',
          pointBorderWidth: 2,
          pointRadius: 6,
          pointHoverRadius: 8
        }],
        config: {
          title: '深圳AQI趋势分析',
          xAxis: { title: '日期' },
          yAxis: { title: 'AQI指数', min: 0, max: 100 }
        }
      },
      ozone: {
        labels: ['1月11日', '1月12日', '1月13日', '1月14日', '1月15日'],
        datasets: [{
          label: '臭氧浓度',
          data: [85, 92, 78, 105, 88],
          borderColor: 'rgb(34, 197, 94)',
          backgroundColor: 'rgba(34, 197, 94, 0.1)',
          borderWidth: 3,
          tension: 0.4,
          fill: true,
          pointBackgroundColor: 'rgb(34, 197, 94)',
          pointBorderColor: '#fff',
          pointBorderWidth: 2,
          pointRadius: 6,
          pointHoverRadius: 8
        }],
        config: {
          title: '臭氧浓度变化趋势',
          xAxis: { title: '日期' },
          yAxis: { title: '臭氧浓度 (μg/m³)', min: 0, max: 150 }
        }
      }
    }
    
    return mockData[params.type] || mockData.aqi
  } catch (error) {
    console.error(`Failed to get chart data for type ${params.type}:`, error)
    throw error
  }
}

// 创建渐变背景（用于图表）
export function createChartGradient(ctx: CanvasRenderingContext2D, color1: string, color2: string): CanvasGradient {
  const gradient = ctx.createLinearGradient(0, 0, 0, 250)
  gradient.addColorStop(0, color1)
  gradient.addColorStop(1, color2)
  return gradient
}

// 图表配置预设
export const chartPresets = {
  aqi: {
    borderColor: 'rgb(99, 102, 241)',
    backgroundColor: 'rgba(99, 102, 241, 0.1)',
    pointBackgroundColor: 'rgb(99, 102, 241)',
  },
  ozone: {
    borderColor: 'rgb(34, 197, 94)',
    backgroundColor: 'rgba(34, 197, 94, 0.1)',
    pointBackgroundColor: 'rgb(34, 197, 94)',
  },
  temperature: {
    borderColor: 'rgb(239, 68, 68)',
    backgroundColor: 'rgba(239, 68, 68, 0.1)',
    pointBackgroundColor: 'rgb(239, 68, 68)',
  }
}